<template>
  <div class="teacherInfo">
        <div class="detail">
             <div class="thum">
                  <img :src="images[0].compressPicture"/>
             </div>
             <div class="info">
                  <div class="top">
                       <label>{{chname}}</label>
                       <p><star :score="score"></star></p>
                       <span>高考{{nceeScore}}分</span>
                  </div>
                  <div class="middle">
                       <span>{{school}}</span>
                       <label>{{grade}} {{sex | changeSex}}</label>
                  </div>
                  <div class="bottom">
                       <span>英语</span>
                       <span>物理</span>
                       <label>授课{{teachDuration}}小时</label>
                  </div>
             </div>
        </div>
        <div class="basic">
             <i class="collect" :class="{'active':likeList.indexOf(id)>-1}" @click="toggle(id);"></i>
             <p class="title">基本资料</p>
             <ul>
                <li>
                     <label>本科专业：</label>
                     <p>{{major}}</p>
                </li>
                <li>
                     <label>高考省份：</label>
                     <p>{{homeProvince}}</p>
                </li>
                <li>
                     <label>文科理科：</label>
                     <p>{{subjectType | changeSubjectType}}</p>
                </li>
                <li>
                     <label>高考成绩：</label>
                     <p>{{nceeScore}} 高出{{scoreLevel}}分数线{{beyondNceeScore}}分</p>
                </li>
                <li>
                     <label>录取批次：</label>
                     <p>{{scoreLevel}}</p>
                </li>
                <li>
                     <label>获奖情况：</label>
                     <p>{{prizeDescription}}</p>
                </li>
                <li>
                     <label>备注信息：</label>
                     <p>{{remark}}</p>
                </li>
             </ul>
        </div>
        <div class="course">
             <p class="title">课程范围</p>
             <ul>
                  <li>
                      <b>{{subject1}}</b>
                      <ol>
                           <li v-for="studentLevel in studentLevel1Filter">{{studentLevel}}</li>
                      </ol>
                  </li>
                  <li v-if="subject2">
                      <b>{{subject2}}</b>
                      <ol>
                           <li v-for="studentLevel in studentLevel2Filter">{{studentLevel}}</li>
                      </ol>
                  </li>
             </ul>
        </div>
        <div class="teachingTime">
             <p class="title">教学时间</p>
             <table cellpadding="0" cellspacing="0">
                    <thead>
                           <tr>
                                <th width="23%">教学时间</th>
                                <th width="11%">一</th>
                                <th width="11%">二</th>
                                <th width="11%">三</th>
                                <th width="11%">四</th>
                                <th width="11%">五</th>
                                <th width="11%">六</th>
                                <th width="11%">日</th>
                           </tr>
                    </thead>
                    <tbody>
                           <tr>
                                <td>上午</td>
                                <td :class="{'selected':teachTime.indexOf('1a')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('2a')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('3a')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('4a')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('5a')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('6a')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('7a')>-1}"></td>
                           </tr>
                           <tr>
                                <td>下午</td>
                                <td :class="{'selected':teachTime.indexOf('1b')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('2b')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('3b')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('4b')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('5b')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('6b')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('7b')>-1}"></td>
                           </tr>
                           <tr>
                                <td>晚上</td>
                                <td :class="{'selected':teachTime.indexOf('1c')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('2c')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('3c')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('4c')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('5c')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('6c')>-1}"></td>
                                <td :class="{'selected':teachTime.indexOf('7c')>-1}"></td>
                           </tr>
                    </tbody>
             </table>
        </div>
        <div class="introduce">
             <p class="title">自我描述</p>
             <div>{{description}}</div>
        </div>
        <div class="photo">
             <p class="title">教师风采</p>
             <ul>
                  <li v-for="image in images">
                     <img :src="image.compressPicture"/>
                  </li>
             </ul>
        </div>
        <div class="experience">
             <p class="title">教学经验（{{experienceList.length}}条）</p>
             <ul>
                 <li v-for="experience in experienceList">
                      <p>{{experience.startDate}} 到 {{experience.endDate}}</p>
                      <div>{{experience.description}}</div>
                 </li>
             </ul>
        </div>
        <div class="feedback">
             <p class="title">教学反馈（{{commentList.length}}次）</p>
             <ul>
                 <li v-for="comment in commentListShow">
                      <p class="mark">{{comment.commentUser}}评价：<star :score="comment.commentRating"></star></p>
                      <p class="subject">课程：{{comment.commentGrade}}{{comment.commentSubject}}</p>
                      <p class="evaluate">{{comment.commentContent}}</p>
                      <time>{{comment.commentDate}}</time>
                 </li>
             </ul>
             <p v-if="commentList.length>3" class="more" @click="controlCommentAmount();">{{controlWord}}</p>
        </div>
        <div class="charge">
             <p class="title">收费标注</p>
             <ul>
                 <li v-for="fee in FeeList">
                     <label>{{fee.itemName}}</label>
                     <span>{{fee.itemValue}}元/时</span>
                 </li>
             </ul>
        </div>
        <div class="ask">
              <p @click="mb_show=true;">请TA辅导</p>
        </div>
        <div class="mengban" v-show="mb_show" @click="mb_show=false;">
              <ul @click.stop="">
                   <li><a :href="'tel:'+mobile">电话咨询</a></li>
                   <li>请ta辅导</li>
                   <li @click="mb_show=false;">取消</li>
              </ul>
        </div>
        <!--查看照片容器-->
        <div id="wrapper">
           <div id="scroller" ref="scroller">
               <ul id="thelist">
                  <li v-for="image in images">
                     <img :src="image.compressPicture"/>
                  </li>
               </ul>
           </div>
        </div>
  </div>
</template>

<script>
import star from './star'
    /*function loaded() {
        new iScroll('wrapper', {
            snap: true,
            momentum: false,//阻止惯性滑动
            hScrollbar: false,
            onScrollEnd: function () {
                $('.curPage').text(this.currPageX+1);
            }
        });
    }

    document.addEventListener('DOMContentLoaded', loaded, false);*/
export default {
  data () {
    return {
      id:'',
      beyondNceeScore:"",
      birth:"",
      chname:"",
      description:"",
      educationStatus:"",
      grade:"",
      homeCity:"",
      homeProvince:"",
      major:"",
      mobile:"",
      nceeScore:"",
      prizeDescription:"",
      remark:"",
      school:"",
      scoreLevel:"",
      teachDuration:"",
      sex:"",
      status:"",
      subjectType:"",
      subject1:'',
      subject2:'',
      studentLevel1:[],
      studentLevel2:[],
      score:'',
      subjectType:'文科',
      likeList:[],
      teachTime:[],
      images:['','','','',''],
      experienceList:[],
      commentList:[],
      showCommentAmount:3,
      FeeList:[],
      mb_show:false
    }
  },
  components:{
    star
  },
  watch:{
    'likeList':function(newVal,oldVal){
       localStorage.likeList=newVal.join('|');
    }
  },
  computed:{
    'commentListShow':function(){
       let commentListShow=[];
       if(this.showCommentAmount==3){
         this.commentList.forEach(function(v,i){
           if(i<3){
             commentListShow.push(v);
           }
         });
         return commentListShow;
       }else{
         return this.commentList;
       }
    },
    'controlWord':function(){
      if(this.showCommentAmount==3){
        return "查看全部";
      }else{
        return "收起";
      }
    },
    'studentLevel1Filter':function(){
       return this.studentLevel1.filter(function(v,i){
                return v.length>0;
            }).map(function(v,i){
               if(v=="一年级"){
                 return 1;
               }else if(v=="二年级"){
                 return 2;
               }else if(v=="三年级"){
                 return 3;
               }else if(v=="四年级"){
                 return 4;
               }else if(v=="五年级"){
                 return 5;
               }else if(v=="六年级"){
                 return 6;
               }else if(v=="七年级"){
                 return 7;
               }else if(v=="八年级"){
                 return 8;
               }else if(v=="九年级"){
                 return 9;
               }else if(v=="高一"){
                 return 10;
               }else if(v=="高二"){
                 return 11;
               }else if(v=="高三"){
                 return 12;
               }
            }).sort(function(a,b){
              return a-b
            }).map(function(v,i){
               if(v==1){
                 return "一年级";
               }else if(v==2){
                 return "二年级";
               }else if(v==3){
                 return "三年级";
               }else if(v==4){
                 return "四年级";
               }else if(v==5){
                 return "五年级";
               }else if(v==6){
                 return "六年级";
               }else if(v==7){
                 return "七年级";
               }else if(v==8){
                 return "八年级";
               }else if(v==9){
                 return "九年级";
               }else if(v==10){
                 return "高一";
               }else if(v==11){
                 return "高二";
               }else if(v==12){
                 return "高三";
               }
            });
    },
    'studentLevel2Filter':function(){
       return this.studentLevel2.filter(function(v,i){
                return v.length>0;
            }).map(function(v,i){
               if(v=="一年级"){
                 return 1;
               }else if(v=="二年级"){
                 return 2;
               }else if(v=="三年级"){
                 return 3;
               }else if(v=="四年级"){
                 return 4;
               }else if(v=="五年级"){
                 return 5;
               }else if(v=="六年级"){
                 return 6;
               }else if(v=="七年级"){
                 return 7;
               }else if(v=="八年级"){
                 return 8;
               }else if(v=="九年级"){
                 return 9;
               }else if(v=="高一"){
                 return 10;
               }else if(v=="高二"){
                 return 11;
               }else if(v=="高三"){
                 return 12;
               }
            }).sort(function(a,b){
              return a-b
            }).map(function(v,i){
               if(v==1){
                 return "一年级";
               }else if(v==2){
                 return "二年级";
               }else if(v==3){
                 return "三年级";
               }else if(v==4){
                 return "四年级";
               }else if(v==5){
                 return "五年级";
               }else if(v==6){
                 return "六年级";
               }else if(v==7){
                 return "七年级";
               }else if(v==8){
                 return "八年级";
               }else if(v==9){
                 return "九年级";
               }else if(v==10){
                 return "高一";
               }else if(v==11){
                 return "高二";
               }else if(v==12){
                 return "高三";
               }
            });
    }
  },
  methods:{
    controlCommentAmount(){
      if(this.showCommentAmount==3){
         this.showCommentAmount=this.commentList.length;
      }else{
         this.showCommentAmount=3;
      }
    },
    toggle(id){
      let _this=this;
      if(_this.likeList.indexOf(id)>-1){
        _this.likeList.forEach(function(v,i){
           if(v==id){
             _this.likeList.splice(i,1);
           }
        });
      }else{
        _this.likeList.push(id);
      }
    },
    getCookie(){
       if(localStorage.likeList){
          this.likeList=localStorage.likeList.split('|');
       }else{
          localStorage.likeList=''; 
       }
    },
    loaded(){
        new iScroll('wrapper', {
            snap: true,
            momentum: false,//阻止惯性滑动
            hScrollbar: false,
            onScrollEnd: function () {
                //$('.curPage').text(this.currPageX+1);
            }
        });
    },
    getData(){
        let _this=this;
        _this.$http.get("/api/teacherController.do?id="+_this.id+"&getTeacherBaseInfoById=null").then((data)=>{
            _this.beyondNceeScore  = data.body.beyondNceeScore;
            _this.birth            = data.body.birth;
            _this.chname           = data.body.chname;
            _this.description      = data.body.description;
            _this.educationStatus  = data.body.educationStatus;
            _this.grade            = data.body.grade;
            _this.homeCity         = data.body.homeCity;
            _this.homeProvince     = data.body.homeProvince;
            _this.major            = data.body.major;
            _this.mobile           = data.body.mobile;
            _this.nceeScore        = data.body.nceeScore;
            _this.prizeDescription = data.body.prizeDescription;
            _this.score            = data.body.rating;
            _this.remark           = data.body.remark;
            _this.school           = data.body.school;
            _this.scoreLevel       = data.body.scoreLevel;
            _this.sex              = data.body.sex;
            _this.status           = data.body.status;
            _this.subjectType      = data.body.subjectType;
        });
        _this.$http.get("/api/teacherController.do?id="+_this.id+"&getTeacherSubjectInfoById=null").then((data)=>{
            _this.subject1      = data.body.subject1;
            _this.subject2      = data.body.subject2;
            _this.studentLevel1 = data.body.studentLevel1.split('|');
            _this.studentLevel2 = data.body.studentLevel2.split('|');
        });
        _this.$http.get("/api/teacherController.do?id="+_this.id+"&getTeacherTeachingInfoById=null").then((data)=>{
            if(data.body.teachTime){
              _this.teachTime      = data.body.teachTime.split('|');
              _this.teachDuration  =data.body.teachDuration;
            }
            
        });
        _this.$http.get("/api/teacherController.do?id="+_this.id+"&type=1&getTeacherPictureListById=null").then((data)=>{
               _this.images = data.body;
               var len=_this.images.length;
               _this.$refs.scroller.style.width=len*100+'%';
               var lis=_this.$refs.scroller.getElementsByTagName('li');
               for(let i=0;i<len;i++){
                  lis[i].style.width=100/len+'%';
               }
        });
        _this.$http.get("/api/teacherController.do?id="+_this.id+"&getTeacherExperienceInfoById=null").then((data)=>{
               data.body.forEach(function(v,i){
                 if(v.description){
                   _this.experienceList.push(v);
                 }
               });
        });
        _this.$http.get("/api/teacherController.do?id="+_this.id+"&getTeacherCommentInfoListById=null").then((data)=>{
               _this.commentList=data.body;
        });
        _this.$http.get("/api/teacherController.do?id="+_this.id+"&getTeacherTeachingFeeScale=null").then((data)=>{
               _this.FeeList=data.body;
        });
    }
  },
  mounted:function(){
    this.id=this.$route.params.id;
    this.getData();
    this.getCookie();
    this.loaded();
  },
  filters:{
    changeSex(num){
      if(num==0){
        return "男";
      }else if(num==1){
        return "女";
      }
    },
    changeSubjectType(num){
      if(num==0){
        return "文科";
      }else if(num==1){
        return "理科";
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.public
{
    padding:0.25rem 0;
    line-height:0.34rem;
    height:0.34rem;
    font-size:0.32rem;
    font-weight:600;
    text-indent:0.2rem;
    position:relative;
    &::before
    {
        content:'';
        position:absolute;
        left:0;
        top:0.25rem;
        display:inline-block;
        width:0.08rem;
        height:0.34rem;
        background:#078def;
    }
}
.teacherInfo
{
    padding-bottom:1.2rem;
    .detail
    {
        background:#fff;
        padding:0.3rem;
        display:flex;
        border-top:1px solid #eee;
        border-bottom:1px solid #eee;
        margin-bottom:0.2rem;
        .thum
        {
            flex:0 0 1.8rem;
            height:1.8rem;
            margin-right:0.3rem;
            img
            {
                width:100%;
                height:100%;
            }
        }
        .info
        {
            flex:1;
            position:relative;
            .top
            {
                overflow:hidden;
                position:absolute;
                left:0;
                top:0;
                width:100%;
                label
                {
                    float:left;
                    font-size:0.32rem;
                }
                p
                {
                    display:inline-block;
                    float:left;
                }
                span
                {
                    float:right;
                }
            }
            .middle
            {
                overflow:hidden;
                position:absolute;
                left:0;
                top:50%;
                margin-top:-0.15rem;
                width:100%;
                span
                {
                    float:left;
                }
                label
                {
                    float:right;
                }
            }
            .bottom
            {
                overflow:hidden;
                position:absolute;
                left:0;
                bottom:0;
                width:100%;
                span
                {
                    line-height:0.4rem;
                    height:0.4rem;
                    padding:0 0.2rem;
                    border:1px solid #ccc;
                    font-size:0.22rem;
                }
                label
                {
                    float:right;
                }
            }
        }
    }
    .basic
    {
        padding:0 0.3rem 0.3rem 0.3rem;
        background:#fff;
        position:relative;
        margin-bottom:0.2rem;
        .collect
        {
            width:1rem;
            height:1rem;
            display:inline-block;
            position:absolute;
            right:0;
            top:0;
            background-image:url(../assets/collection.png);
            background-position:center;
            background-size:0.5rem auto;
            background-repeat:no-repeat;
            z-index: 100;
            &.active
            {
                background-image:url(../assets/big_love.png);
            }
        }
        .title
        {
            @extend .public;
        }
        ul
        {
            li
            {
                display:flex;
                label
                {
                    flex:0 0 1.5rem;
                    line-height:0.6rem;
                }
                p
                {
                    flex:1;
                    line-height:0.6rem;
                }
            }
        }
    }
    .course
    {
        padding:0 0.3rem 0.1rem 0.3rem;
        background:#fff;
        margin-bottom:0.2rem;
        .title
        {
            @extend .public;
        }
        ul
        {
            li
            {
                b
                {
                    display:block;
                    border-bottom:1px dotted #eee;
                    padding-bottom:0.2rem;
                }
                ol
                {
                    overflow:hidden;
                    li
                    {
                        height:0.45rem;
                        line-height:0.45rem;
                        border:1px solid #078def;
                        padding:0 0.1rem;
                        float:left;
                        display:inline-block;
                        margin:0.2rem 0.1rem 0.2rem 0;
                        font-size:0.22rem;
                    }
                }
            }
        }
    }
    .teachingTime
    {
        padding:0 0.3rem 0.3rem 0.3rem;
        background:#fff;
        margin-bottom:0.2rem;
        .title
        {
            @extend .public;
        }
        table
        {
            width:100%;
            line-height:0.7rem;
            border-collapse: collapse;
            td,th
            {
                border:1px solid #eee;
                text-align:center;
                &.selected
                {
                    position:relative;
                    &::after
                    {
                       content:'√';
                       display:inline-block;
                       background:#078def;
                       width:0.36rem;
                       height:0.36rem;
                       line-height:0.36rem;
                       border-radius:50%;
                       color:#fff;
                       text-align:center;
                       font-size:0.24rem;
                    }
                }
            }
        }
    }
    .introduce
    {
        padding:0 0.3rem 0.3rem 0.3rem;
        background:#fff;
        margin-bottom:0.2rem;
        .title
        {
            @extend .public;
        }
    }
    .photo
    {
        padding:0 0.3rem 0.1rem 0.3rem;
        background:#fff;
        margin-bottom:0.2rem;
        .title
        {
            @extend .public;
        }
        ul
        {
            overflow:hidden;
            li
            {
                width:1.5rem;
                height:1.5rem;
                float:left;
                margin-right:0.2rem;
                margin-bottom:0.2rem;
                img
                {
                    width:100%;
                    height:100%;
                }
            }
        }
    }
    .experience
    {
        padding:0 0.3rem 0.3rem 0.3rem;
        background:#fff;
        margin-bottom:0.2rem;
        .title
        {
            @extend .public;
        }
        ul
        {
            li
            {
                position:relative;
                &::before
                {
                    content:'';
                    width:0.1rem;
                    height:0.1rem;
                    text-align:center;
                    color:#078def;
                    display:inline-block;
                    border:0.12rem solid #078def;
                    border-radius:50%;
                    position:absolute;
                    left:0;
                    top:0.2rem;
                }
                p
                {
                    line-height:0.7rem;
                    color:#666;
                    padding-left:0.44rem;
                }
                div
                {
                    line-height:0.4rem;
                    position:relative;
                    padding-left:0.44rem;
                    &::after
                    {
                        content:'';
                        width:0;
                        height:100%;
                        display:inline-block;
                        border-right:1px solid #078def;
                        position:absolute;
                        left:0.14rem;
                        top:0;
                    }
                }
                &:last-child
                {
                  div
                  {
                    &::after
                    {
                        content:'';
                        width:0;
                        height:100%;
                        display:inline-block;
                        border-right:none;
                        position:absolute;
                        left:0.14rem;
                        top:0;
                    }
                  }
                }
            }
        }
    }
    .feedback
    {
        padding:0 0.3rem 0.3rem 0.3rem;
        background:#fff;
        margin-bottom:0.2rem;
        .title
        {
            @extend .public;
        }
        ul
        {
            li
            {
               padding:0 0.2rem;
               border:1px solid #eee;
               border-bottom:none;
               position:relative;
               &:last-child
               {
                border-bottom:1px solid #eee;
               }
               .mark
               {
                  font-size:0.3rem;
                  line-height:0.6rem;
               }
               .course
               {
                  line-height:0.6rem;
               }
               .evaluate
               {
                  line-height:1.4;
                  padding:0.1rem 0;
               }
               time
               {
                  position: absolute;
                  right:0.2rem;
                  top:0.1rem;
                  line-height:0.5rem;
                  display:inline-block;
                  color:#999;
               }
            }
        }
        .more
        {
            line-height:0.5rem;
            height:0.5rem;
            border:1px solid #eee;
            background:rgba(243,237,237,0.22);
            border-radius:0.15rem;
            text-align:center;
            margin-top:0.15rem;
            font-size:0.22rem;
        }
    }
    .charge
    {
        padding:0 0.3rem 0.3rem 0.3rem;
        background:#fff;
        margin-bottom:0.2rem;
        .title
        {
            @extend .public;
        }
        ul
        {
            li
            {
               display:flex;
               line-height:2.5;
               border-bottom:1px solid #eee;
               label
               {
                  flex:1;
               }
               span
               {
                  flex:1;
                  text-align:right;
                  line-height:2.5;
                  color:#999;
               }
            }
        }
    }
    .ask
    {
        width:100%;
        position:fixed;
        left:0;
        bottom:0;
        p
        {
            margin:0.24rem;
            line-height:0.8rem;
            height:0.8rem;
            border-radius:0.1rem;
            border:1px solid #078def;
            text-align:center;
            background:#078def;
            color:#fff;
            font-size:0.32rem;
        }
        
    }
    .mengban
    {
        position:fixed;
        left:0;
        top:0;
        z-index: 100;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.7);
        ul
        {
            background:#fff;
            position:absolute;
            width:100%;
            left:0;
            bottom:0;
            li
            {
                line-height:0.8rem;
                height:0.8rem;
                text-align:center;
                border-bottom:1px solid #eee;
                &:last-child
                {
                    border-top:0.1rem solid #eee;
                }
            }
        }
    }
    #wrapper
    {
        position:fixed;
        left:0;
        top:0;
        z-index: 100;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.7);
        #scroller
        {
          #thelist
          {
            overflow: hidden;
            li
            {
              float: left;
              img
              {
                width:100%;
              }
            }
          }
        }
    }
}
</style>
